<template>
	<view>
		<view v-if="commodity_list.length > 0 || service_list.length > 0" class="page-bottom-fixed">
			<view class="padding-horizontal-main" style="padding-top: 20rpx;">
				<!-- 地址 -->
				<block v-if="commodity_list.length > 0">
					<view class="padding-horizontal-main border-radius-main bg-white spacing-mb"
						style="padding-top: 20rpx;">
						<view class="address arrow-right" @tap="address_event">
							<view v-if="address_data?.tel" style="padding-bottom: 20rpx;">
								<view class="address-base">
									<text>{{address_data.name}}</text>
									<text class="fr">{{address_data.tel}}</text>
								</view>
								<view class="address-detail oh" style="margin-top: 20rpx;">
									<image class="icon fl" src="../../static/images/map-icon.png" mode="widthFix">
									</image>
									<view class="text fr">
										{{address_data.province.name || ''}}{{address_data.city.name || ''}}{{address_data.county.name || ''}}{{address_data.address || ''}}
									</view>
								</view>
							</view>
							<view v-else class="cr-gray" style="padding: 15rpx 0 35rpx 0">
								{{'请选择收货地址'}}
							</view>
						</view>
						<view class="address-divider spacing-mb"></view>
					</view>
				</block>

				<!-- 商品数据 -->
				<view class="border-radius-main bg-white spacing-mb" style="padding: 20rpx;">
					<!-- 商品 -->
					<block v-if="commodity_list?.length > 0">
						<view style="margin-bottom: 10rpx;">
							<view v-for="(item, index) in commodity_list" :key="index" class="oh"
								style="padding-top: 20rpx; padding-bottom: 20rpx; border-bottom: dashed 1px #f7f7f7;">
								<image class="goods-image fl radius"
									:src="item.info?.ciPict ? organizationGateway + '/file/download?filepath=' + item.info?.ciPict[0].path : ''"
									mode="aspectFill"></image>
								<view class="goods-base">
									<view class="goods-title multi-text">{{item.info.ciName}}</view>
									<view class="cr-gray multi-text">
										<view>{{item.info?.ciAlna}}</view>
										<view>{{'单位：' + item.info?.ciUnit}}</view>
									</view>
									<view class="oh pr" style="margin-top: 10rpx;">
										<text style="font-weight: bold;">{{"￥" + numberFormat(item.ocPric, 2)}}</text>
										<text class="original-price">{{"￥" + numberFormat(item.info.ciMava, 2)}}</text>
										<text class="buy-number pa cr-gray">x{{item.count}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>

					<!-- 服务 -->
					<block v-if="service_list?.length > 0">
						<view style="margin-bottom: 10rpx;">
							<view v-for="(item, index) in service_list" :key="index" class="oh"
								style="padding-top: 20rpx; padding-bottom: 20rpx; border-bottom: dashed 1px #f7f7f7;">
								<image class="goods-image fl radius"
									:src="item.info?.siPict ? organizationGateway + '/file/download?filepath=' + item.info?.siPict[0].path : ''"
									mode="aspectFill"></image>
								<view class="goods-base">
									<view class="goods-title multi-text">{{item.info.siName}}</view>
									<view class="cr-gray multi-text">
										<view>{{item.info?.siCont}}</view>
										<view>{{'单位：' + item.info?.siUnsu + item.info?.siUnit}}</view>
									</view>
									<view class="oh pr" style="margin-top: 10rpx;">
										<text style="font-weight: bold;">{{"￥" + numberFormat(item.ocPric, 2)}}</text>
										<text class="original-price">{{"￥" + numberFormat(item.info.siPric, 2)}}</text>
										<text class="buy-number pa cr-gray">x{{item.count}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>

					<!-- 优惠劵 -->
					<view class="buy-data-item buy-data-item-group arrow-right" @tap="plugins_coupon_open_event">
						<text class="cr-base">优惠劵</text>
						<text class="cr-grey fr cp">{{'请选择优惠券'}}</text>
					</view>
					<!-- 扩展数据展示 -->
					<!-- view class="extension-list radius" style="margin-top: 20rpx;">
						<view class="item oh" style="padding: 20rpx;">
							<text class="cr-base fl">{{"运费"}}</text>
							<text class="text-tips fr">{{"￥56"}}</text>
						</view>
					</view> -->
					<!-- 小计 -->
					<view class="oh" style="text-align: right; padding-top: 25rpx;">
						<!-- <text class="original-price" style="margin-right: 10rpx;">{{'111111'}}</text> -->
						<text class="sales-price">{{"￥" + numberFormat(total_price, 2)}}</text>
					</view>
				</view>

				<!-- 积分 -->
				<!-- <view v-if="(plugins_points_data || null) != null && (plugins_points_data.discount_price || 0) > 0"
					class="plugins-points-buy-container padding-main border-radius-main bg-white spacing-mb">
					<view class="select oh">
						<text
							v-if="plugins_points_data.discount_type == 1">使用{{plugins_points_data.use_integral}}个积分兑换商品</text>
						<text v-else>使用积分{{plugins_points_data.use_integral}}个</text>
						<text class="sales-price">-{{currency_symbol}}{{plugins_points_data.discount_price}}</text>
						<view @tap="points_event" class="fr cp">
							<image class="icon"
								:src="common_static_url+'select' + (plugins_points_status ? '-active' : '') + '-icon.png'"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="desc">
						<text
							v-if="plugins_points_data.discount_type == 1">你有积分{{plugins_points_data.user_integral}}个</text>
						<text
							v-else>你有积分{{plugins_points_data.user_integral}}个，可用{{plugins_points_data.use_integral}}个</text>
					</view>
				</view> -->

				<!-- 备注 -->
				<view class="content-textarea-container border-radius-main bg-white spacing-mb" style="padding: 20rpx;">
					<textarea v-if="user_note_status" @blur="bind_user_note_blur_event" @input="bind_user_note_event"
						:focus="true" :disable-default-padding="false" :value="user_note_value" maxlength="60"
						placeholder="备注"></textarea>
					<view v-else @tap="bind_user_note_tap_event" :class="user_note_value == null ? 'cr-gray' : ''">
						{{user_note_value || '备注'}}
					</view>
				</view>

				<!-- 支付方式 -->
				<!-- <view v-if="total_price > 0 && payment_list.length > 0 && common_order_is_booking != 1"
					class="payment-list padding-horizontal-main padding-top-main border-radius-main bg-white oh">
					<view v-for="(item, index) in payment_list" :key="index" class="item tc fl cp margin-bottom-main">
						<view :class="'item-content radius br ' + (item.selected || '')" :data-value="item.id"
							@tap="payment_event">
							<image v-if="(item.logo || null) != null" class="icon margin-right-sm va-m" :src="item.logo"
								mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view> -->
			</view>

			<!-- 导航 -->
			<view class="buy-nav oh wh-auto bg-white br-t">
				<view class="nav-base fl single-text" style="padding-left: 25rpx;">
					<text>合计：</text>
					<text class="sales-price">{{"￥" + numberFormat(total_price, 2)}}</text>
				</view>
				<view class="fr nav-submit" style="padding: 15rpx 20rpx 15rpx 0;">
					<button class="bg-main cr-white round" type="default" @tap="buy_submit_event"
						hover-class="none">提交订单</button>
				</view>
			</view>
		</view>

		<!-- <view v-if="goods_list.length == 0">
			<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg">
			</component-no-data>
		</view> -->
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getCaregoryService,
		getCaregoryCommodity
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				params: null,
				commodity_list: [],
				service_list: [],
				total_price: 0,
				actual_price: 0, // 实际价格
				user_note_value: null,
				user_note_status: false,
				// 优惠劵
				// plugins_coupon_data: null,
				// plugins_coupon_list: [],
				// plugins_use_coupon_ids: [],
				// plugins_choice_coupon_value: [],
				// popup_plugins_coupon_status: false,
				// popup_plugins_coupon_index: null,
				// 门店
				// plugins_realstore_data: [],
				// plugins_choice_realstore_value: {},
				// popup_plugins_realstore_status: false,
				// popup_plugins_realstore_group_id: 0,
				// popup_plugins_realstore_card_index: 0
			};
		},

		computed: {
			...mapGetters({
				organizationGateway: "globalInfo/organizationGateway",
				orUuid: "dailyInfo/orUuid",
				cartInfo: "dailyInfo/cartInfo",
				address_data: "dailyInfo/address_data",
			}),
		},

		onLoad(params) {
			if (params.data != null && JSON.parse(params.data) && this.orUuid) {
				this.params = JSON.parse(params.data)
			}
		},

		onShow() {
			this.loadGoodsInfo()
		},

		methods: {
			async loadGoodsInfo() {
				if (this.params == null) {
					uni.showToast({
						title: "订单信息有误",
						icon: "error",
						duration: 3000,
					});
					return false;
				}
				let service_list = [],
					commodity_list = [],
					total_price = 0;
				if (this.params.buy_type === "commodity") {
					let res = await getCaregoryCommodity({
						orUuid: this.orUuid,
						ciUuid: this.params.ciUuid
					});
					if (res) {
						res.count = this.params.count
						total_price = Number(res.ocPric) * Number(this.params.count)
						commodity_list.push(res)
					}
				}
				if (this.params?.buy_type === "service") {
					let res = await getCaregoryService({
						orUuid: this.orUuid,
						siUuid: this.params.siUuid
					});
					if (res) {
						res.count = this.params.count
						total_price = res.ocPric * Number(this.params.count)
						service_list.push(res)
					}
				}
				if (this.params?.buy_type === "cart") {
					for (let i in this.params.info) {
						let item = this.params.info[i]
						if (item.ciUuid) {
							let res = await getCaregoryCommodity({
								orUuid: this.orUuid,
								ciUuid: item.ciUuid,
							});
							if (res) {
								res.count = item.count
								total_price += Number(res.ocPric) * Number(item.count)
								commodity_list.push(res)
							}
						}
						if (item.siUuid) {
							let res = await getCaregoryService({
								orUuid: this.orUuid,
								siUuid: item.siUuid,
							});
							if (res) {
								res.count = item.count
								total_price += Number(res.ocPric) * Number(item.count)
								service_list.push(res)
							}
						}
					}
				}
				this.total_price = total_price
				this.service_list = service_list
				this.commodity_list = commodity_list
			},

			address_event(e) {
				let address_data = this.address_data
				uni.navigateTo({
					url: '/pages/buy/address?address_data=' + JSON.stringify(address_data)
				});
			},

			// 用户备注输入事件
			bind_user_note_event(e) {
				this.user_note_value = e.detail.value
			},

			// 用户备注点击
			bind_user_note_tap_event(e) {
				this.user_note_status = true
			},

			// 用户备注失去焦点
			bind_user_note_blur_event(e) {
				this.user_note_status = false
			},

			async buy_submit_event(e) {
				let _this = this;
				// let userInfo = uni.getStorageSync("userInfo"); // 用户信息

				// if (!userInfo) {
				// 	uni.showToast({
				// 		title: "没有您的用户信息",
				// 		icon: "error",
				// 		duration: 2000
				// 	});
				// 	_this.closePopup();
				// }
				// if (!userInfo.phone) {
				// 	uni.showToast({
				// 		title: "请授权后操作",
				// 		icon: "error",
				// 		duration: 2000
				// 	});
				// 	_this.closePopup();
				// }
				// if (!userInfo.ciUuid) {
				// 	uni.showToast({
				// 		title: "请登录后操作",
				// 		icon: "error",
				// 		duration: 2000
				// 	});
				// 	_this.closePopup();
				// }
				let nowTime = new Date().getUTCTime();
				const order = {
					// soUuid 订单uuid，服务端生成
					soNumb: moment(nowTime).format("YYYYMMDD") + nowTime, //订单编号
					soType: _this.orderType, // 订单类型
					soItem: _this.activityItem.giUuid, //项目UUID
					soDisc: _this.appointment?.gaStat === false ? Number(_this.appointment?.gaDisc) : 0, //优惠金额
					soCrti: nowTime, //创建时间
					soCuid: userInfo?.ciUuid, //客户UUID
					soNewc: userInfo?.isNew, //客户是否新客
					soCuph: userInfo?.phone,
					soScid: shareId || null, //分享客户UUID
					// soScne  分享客户是否新客
					soStid: staffId || null, //员工UUID
					// soGrid   拼团UUID
					soBook: _this.appointment?.gaStat === false ? true : false, //是否预定
					soStat: "待支付",
					soFrid: _this.activityItem.gpUuid,
					soItin: _this.activityItem,
					scMark: _this.appointment?.gaStat === false ? "活动预定优惠" : "",
					scMone: _this.appointment?.gaStat === false ? Number(_this.appointment?.gaDisc) : 0,
					ggUuid: _this.ggUuid,
				};
				if (_this.orderType === "单独购买") {
					order.soPric = _this.appointment?.gaStat === false ? Number((Number(_this.activityItem.giSppr) -
						Number(_this.appointment?.gaDisc || 0)).toFixed(2)) : Number(_this.activityItem.giSppr); //成交金额
					order.soGrou = false;
				}
				if (_this.orderType === "新团订单") {
					order.soPric = _this.appointment?.gaStat === false ? Number((Number(_this.activityItem.giGppr) -
						Number(_this.appointment?.gaDisc || 0)).toFixed(2)) : Number(_this.activityItem.giGppr); //成交金额
					order.soGrou = true;
				}
				if (_this.orderType === "拼团订单") {
					order.soPric = _this.appointment?.gaStat === false ? Number((Number(_this.activityItem.giGppr) -
						Number(_this.appointment?.gaDisc || 0)).toFixed(2)) : Number(_this.activityItem.giGppr); //成交金额
					order.soGrou = true;
				}
				if (_this.orderType === "参团拼单") {
					order.soPric = _this.appointment?.gaStat === false ? Number((Number(_this.activityItem.giGppr) -
						Number(_this.appointment?.gaDisc || 0)).toFixed(2)) : Number(_this.activityItem.giGppr); //成交金额
					order.soGrou = true;
				}

				const orderDetail = []

				const orderConsumer = {
					// soUuid   后端产生
					puUuid: userInfo.ciUuid, //客户UUID
					puName: userInfo.ciName || null, //客户姓名,
					puAvat: userInfo.avatarUrl,
					puWcna: userInfo.nickName,
					// puPast  客户付款状态
					// puPaid: 付款人UUID
					// puPana  付款人姓名
					// puPati  付款时间
					puType: "个人",
					puPayt: "微信",
					ciPhon: userInfo.phone,
				};

				if (_this.activityItem?.commodities?.totalCount > 0) {
					if (!_this.address) {
						uni.showToast({
							title: "没有收货地址信息",
							icon: "error",
							duration: 2000
						});
						return;
					} else {
						let regionValue = _this.address?.regionValue.split(" ");
						orderConsumer.puRena = _this.address.regionName;
						orderConsumer.puAdpr = regionValue[0];
						orderConsumer.puAdci = regionValue[1];
						orderConsumer.puAdco = regionValue[2];
						orderConsumer.puPhon = _this.address.regionPhone;
						orderConsumer.puAdde = _this.address.regionDetail;
					}
				}
				let ordRes = await createActivityItemsOrder({
					order,
					orderConsumer,
					openid: userInfo.openId
				});
				if (ordRes?.soUuid) {
					uni.requestPayment({
						timeStamp: ordRes.timeStamp,
						nonceStr: ordRes.nonceStr,
						package: ordRes.package,
						signType: ordRes.signType,
						paySign: ordRes.paySign,
						success: function(res) {
							if (order.ggUuid) {
								_this.callback({
									soUuid: ordRes.soUuid,
									ggUuid: order.ggUuid,
									soType: order.soType
								});
							} else {
								_this.callback({
									soUuid: ordRes.soUuid,
									soType: order.soType
								});
							}
						},
						fail: function(res) {
							uni.showToast({
								title: "用户取消支付",
								icon: "error",
								duration: 2000
							});
							_this.closePopup();
							return;
						},
					});
				}
			}
		}
	};
</script>
<style>
	/* 地址 */
	.address-base,
	.address-detail {
		padding-right: 40rpx;
	}

	.address-detail .icon {
		width: 30rpx;
		height: 35rpx !important;
		margin-top: 7rpx;
	}

	.address-detail .text {
		width: calc(100% - 40rpx);
	}

	/**
	 * 地址边线
	 */
	.address-divider {
		height: 4px;
		background-image: url("");
		background-repeat-y: no-repeat;
	}

	/**
	* 商品
	*/
	.goods-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.goods-title {
		font-weight: bold;
		vertical-align: middle;
		min-height: 10rpx;
	}

	.goods-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.buy-number {
		right: 0;
		bottom: 0;
	}

	.goods-base {
		min-height: 160rpx;
		margin-left: 180rpx;
	}

	/**
	 * 数据列表项
	 */
	.buy-data-item {
		padding: 0 40rpx 0 20rpx;
		line-height: 80rpx;
	}

	.buy-data-item-group {
		padding: 0 40rpx 0 0;
	}

	.buy-data-item .right-value {
		width: calc(100% - 300rpx);
		min-height: 80rpx;
	}

	/**
	* 扩展数据
	*/
	.extension-list {
		background-color: #ffffeb;
		border: 1px solid #ffe2cf;
	}

	.extension-list .item:not(:last-child) {
		border-bottom: 1px dashed #ffe2cf;
	}

	.extension-list .item .text-tips {
		color: #ff8f44;
	}

	/**
	* 留言
	*/
	.content-textarea-container {
		height: 100rpx;
	}

	.content-textarea-container view,
	.content-textarea-container textarea {
		height: 100% !important;
	}

	.content-textarea-container textarea {
		padding: 5rpx 0;
	}

	/**
	* 导航
	*/
	.buy-nav {
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.buy-nav,
	.nav-base {
		height: 100rpx;
		line-height: 100rpx;
	}

	.nav-submit button {
		height: 72rpx;
		line-height: 72rpx;
	}

	.nav-base {
		width: calc(60% - 20rpx);
	}

	.nav-submit {
		width: calc(40% - 40rpx);
	}
</style>
